<!-- 点击小分类按钮跳转相应分类的菜谱列表页面 -->
<template>
  <div class="recipe-list-page">
    <div class="header">
      <van-icon name="arrow-left" class="back-icon" @click="goBack" />
      <h1 class="title">{{ categoryName }}</h1>
    </div>
 
    <van-loading v-if="loading" size="24px" vertical>加载中...</van-loading>
 
    <div class="recipe-list-container">
      <van-empty 
        v-if="!loading && recipes.length === 0" 
        :description="emptyDescription"
        image="search"
      />
      <div v-else>
        <div 
          v-for="recipe in recipes" 
          :key="recipe.id" 
          class="recipe-card"
          @click="goToRecipeDetail(recipe)"
        >
          <img :src="recipe.cover" alt="菜谱封面" class="recipe-cover" />
          <div class="recipe-info">
            <h2 class="recipe-name">{{ recipe.name }}</h2>
            <p class="recipe-ingredients">{{ recipe.ingredients }}</p>
            <div class="recipe-footer">
              <span class="favorite-count">
                <van-icon name="star-o" size="14" /> {{ recipe.favoriteCount || 0 }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Small_category">
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getRecipesByCategory } from '../../api';
import { Toast, showFailToast } from 'vant';
 
const route = useRoute();
const router = useRouter();
 
const categoryId = ref(route.query.categoryId?.trim());
// console.log("获取列表id",categoryId.value);
const categoryName = ref(route.query.categoryName || '未知分类');
 
const loading = ref(false);
const recipes = ref([]);
const hasCategory = ref(true);
 
const emptyDescription = computed(() => {
  return hasCategory.value ? '暂无菜谱' : '暂无该分类菜谱';
});
 
const validateCategoryId = () => {
  if (!categoryId.value) {
    showFailToast('分类ID不能为空');
    return false;
  }
  return true;
};
 
const fetchRecipesByCategory = async () => {
  if (!validateCategoryId()) return;
  
  try {
    loading.value = true;
    recipes.value = await getRecipesByCategory(categoryId.value);
    // console.log("展示列表",recipes.value[0].id);
    hasCategory.value = recipes.value.length > 0;
    
    if (recipes.value.length === 0) {
      Toast('该分类暂无菜谱');
    }
  } catch (error) {
    // console.error('获取菜谱失败:', error);
    showFailToast('获取菜谱失败');
    recipes.value = [];
    hasCategory.value = false;
  } finally {
    loading.value = false;
  }
};
 
const goBack = () => router.back();
 
const goToRecipeDetail = (recipe) => {
  router.push({
    name: 'recipe_datail',
    query: { recipeId: recipe.id }  // 使用 params 传递 id
  })
};
 
onMounted(() => {
  fetchRecipesByCategory();
});
</script>

<style scoped>
/* 样式保持不变 */
.recipe-list-page {
  background-color: #f7f8fa;
  min-height: 100vh;
}

.header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #ef4444;
  color: white;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-icon {
  font-size: 20px;
  margin-right: 12px;
  cursor: pointer;
}

.title {
  flex: 1;
  text-align: center;
  margin: 0px 30px 0px 0px;
  font-size: 18px;
  font-weight: 500;
}

.recipe-list-container {
  padding: 12px;
}

.recipe-list-container > div {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 统一控制所有菜谱卡片的间距 */
}

.recipe-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recipe-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.recipe-card:active {
  background-color: #f9f9f9;
}

.recipe-cover {
  width: 100px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.recipe-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.recipe-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.recipe-ingredients {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #666;
  flex: 1;
}

.recipe-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.favorite-count {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>